<template>
  <div
    class="select-option"
    @click="handleClick"
  >
    {{ label }}
  </div>
</template>

<script setup>
const props = defineProps({
  label: {
    type: [String, Number],
    default: '',
  },
});

const emit = defineEmits(['click']);

function handleClick() {
  emit('click', props.label);
}
</script>

<style scoped>
.select-option {
  padding: 0 8px;
  height: 24px;
  line-height: 24px;
}

.select-option:hover {
  background-color: #4169e1;
  color: #fff;
}
</style>
